<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" 
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/base}">
<head>
    <title>个人资料 - 智能营养管理系统</title>
</head>
<body>
    <div layout:fragment="content">
        <!-- 页面标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="fas fa-user-edit me-2"></i>个人资料</h2>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a th:href="@{/dashboard}">仪表盘</a></li>
                    <li class="breadcrumb-item active">个人资料</li>
                </ol>
            </nav>
        </div>

        <!-- 消息提示 -->
        <div th:replace="~{layout/base :: messages}"></div>

        <div class="row">
            <!-- 个人信息卡片 -->
            <div class="col-lg-8">
                <div class="card shadow-sm">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-user me-2"></i>基本信息</h5>
                    </div>
                    <div class="card-body">
                        <form th:action="@{/profile}" method="post" th:object="${userProfile}">
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="username" class="form-label">用户名</label>
                                    <input type="text" class="form-control" id="username" 
                                           th:value="${userProfile.username}" readonly>
                                    <div class="form-text">用户名不可修改</div>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="email" class="form-label">邮箱</label>
                                    <input type="email" class="form-control" 
                                           th:field="*{email}" id="email" required>
                                    <div class="invalid-feedback" th:if="${#fields.hasErrors('email')}" 
                                         th:errors="*{email}"></div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="realName" class="form-label">真实姓名</label>
                                    <input type="text" class="form-control" 
                                           th:field="*{realName}" id="realName">
                                    <div class="invalid-feedback" th:if="${#fields.hasErrors('realName')}" 
                                         th:errors="*{realName}"></div>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="gender" class="form-label">性别</label>
                                    <select class="form-select" th:field="*{gender}" id="gender">
                                        <option value="MALE">男</option>
                                        <option value="FEMALE">女</option>
                                        <option value="OTHER">其他</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="age" class="form-label">年龄</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" 
                                               th:field="*{age}" id="age" min="1" max="150">
                                        <span class="input-group-text">岁</span>
                                    </div>
                                    <div class="invalid-feedback" th:if="${#fields.hasErrors('age')}" 
                                         th:errors="*{age}"></div>
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <label for="height" class="form-label">身高</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" 
                                               th:field="*{height}" id="height" min="50" max="300" step="0.1">
                                        <span class="input-group-text">cm</span>
                                    </div>
                                    <div class="invalid-feedback" th:if="${#fields.hasErrors('height')}" 
                                         th:errors="*{height}"></div>
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <label for="weight" class="form-label">体重</label>
                                    <div class="input-group">
                                        <input type="number" class="form-control" 
                                               th:field="*{weight}" id="weight" min="20" max="1000" step="0.1">
                                        <span class="input-group-text">kg</span>
                                    </div>
                                    <div class="invalid-feedback" th:if="${#fields.hasErrors('weight')}" 
                                         th:errors="*{weight}"></div>
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="activityLevel" class="form-label">活动水平</label>
                                <select class="form-select" th:field="*{activityLevel}" id="activityLevel">
                                    <option value="SEDENTARY">久坐 (很少运动)</option>
                                    <option value="LIGHT">轻度活动 (每周1-3次)</option>
                                    <option value="MODERATE">中度活动 (每周3-5次)</option>
                                    <option value="ACTIVE">高度活动 (每周6-7次)</option>
                                    <option value="VERY_ACTIVE">极高活动 (每天2次)</option>
                                </select>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="dietaryRestrictions" class="form-label">饮食限制</label>
                                    <textarea class="form-control" th:field="*{dietaryRestrictions}" 
                                              id="dietaryRestrictions" rows="3" 
                                              placeholder="如：素食、低脂、低盐等"></textarea>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="allergies" class="form-label">过敏信息</label>
                                    <textarea class="form-control" th:field="*{allergies}" 
                                              id="allergies" rows="3" 
                                              placeholder="如：花生、海鲜、乳制品等"></textarea>
                                </div>
                            </div>
                            
                            <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>保存更改
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <!-- 健康指标卡片 -->
            <div class="col-lg-4">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0"><i class="fas fa-heartbeat me-2"></i>健康指标</h5>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-12 mb-3">
                                <h6 class="text-muted">BMI</h6>
                                <h4 class="text-primary" th:text="${userProfile.bmi != null ? #numbers.formatDecimal(userProfile.bmi, 1, 1) : '未计算'}">0.0</h4>
                                <small class="text-muted" th:text="${userProfile.bmiStatus}">状态</small>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <div class="row text-center">
                            <div class="col-6 mb-2">
                                <h6 class="text-muted small">基础代谢率</h6>
                                <span class="fw-bold" th:text="${userProfile.bmr != null ? #numbers.formatDecimal(userProfile.bmr, 0, 0) + ' kcal' : '未计算'}">0 kcal</span>
                            </div>
                            <div class="col-6 mb-2">
                                <h6 class="text-muted small">总能量消耗</h6>
                                <span class="fw-bold" th:text="${userProfile.tdee != null ? #numbers.formatDecimal(userProfile.tdee, 0, 0) + ' kcal' : '未计算'}">0 kcal</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 账户信息卡片 -->
                <div class="card shadow-sm">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>账户信息</h5>
                    </div>
                    <div class="card-body">
                        <p class="mb-2">
                            <strong>注册时间：</strong><br>
                            <span th:text="${#temporals.format(userProfile.createdAt, 'yyyy-MM-dd HH:mm')}">2024-01-01 12:00</span>
                        </p>
                        <p class="mb-2">
                            <strong>最后更新：</strong><br>
                            <span th:text="${#temporals.format(userProfile.updatedAt, 'yyyy-MM-dd HH:mm')}">2024-01-01 12:00</span>
                        </p>
                        
                        <hr>
                        
                        <div class="d-grid gap-2">
                            <a th:href="@{/nutrition-goals}" class="btn btn-outline-primary btn-sm">
                                <i class="fas fa-bullseye me-2"></i>营养目标设置
                            </a>
                            <button type="button" class="btn btn-outline-warning btn-sm" 
                                    data-bs-toggle="modal" data-bs-target="#changePasswordModal">
                                <i class="fas fa-key me-2"></i>修改密码
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 修改密码模态框 -->
    <div class="modal fade" id="changePasswordModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-key me-2"></i>修改密码</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="changePasswordForm">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="oldPassword" class="form-label">当前密码</label>
                            <input type="password" class="form-control" id="oldPassword" required>
                        </div>
                        <div class="mb-3">
                            <label for="newPassword" class="form-label">新密码</label>
                            <input type="password" class="form-control" id="newPassword" 
                                   minlength="6" required>
                        </div>
                        <div class="mb-3">
                            <label for="confirmNewPassword" class="form-label">确认新密码</label>
                            <input type="password" class="form-control" id="confirmNewPassword" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">确认修改</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <th:block layout:fragment="page-scripts">
        <script>
            // BMI计算和显示
            function calculateBMI() {
                const height = parseFloat(document.getElementById('height').value);
                const weight = parseFloat(document.getElementById('weight').value);
                
                if (height && weight) {
                    const heightInMeters = height / 100;
                    const bmi = weight / (heightInMeters * heightInMeters);
                    
                    // 这里可以实时更新BMI显示
                    console.log('BMI:', bmi.toFixed(1));
                }
            }
            
            // 身高体重变化时重新计算BMI
            document.getElementById('height').addEventListener('input', calculateBMI);
            document.getElementById('weight').addEventListener('input', calculateBMI);
            
            // 修改密码表单处理
            document.getElementById('changePasswordForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const oldPassword = document.getElementById('oldPassword').value;
                const newPassword = document.getElementById('newPassword').value;
                const confirmNewPassword = document.getElementById('confirmNewPassword').value;
                
                if (newPassword !== confirmNewPassword) {
                    alert('新密码和确认密码不一致');
                    return;
                }
                
                // 这里应该发送AJAX请求到后端
                // 暂时用alert模拟
                alert('密码修改功能待实现');
            });
        </script>
    </th:block>
</body>
</html>
